<template>
    <rx-dialog @handOk="ok" @cancel="cancel">
        <div class="menu-dialog-box">
            <div class="menu-style-layout">
                <div class="menu-item"
                     :class="{'menu-item-active':menu.key === active}"
                     v-for="menu of menus"
                    @click="()=>active = menu.key"
                >
                    <div class="active-bg"></div>
                    <div class="menu-img-box">
                        <img :src="menu.img" alt="">
                    </div>
                    <div class="menu-title">{{menu.title}}</div>
                    <p class="menu-detail">{{menu.detail}}</p>
                </div>
            </div>
        </div>
    </rx-dialog>
</template>

<script>
/**
 * @Author : yangsanjin
 * @Date: 2025-02-21 16:57
 */
import {RxDialog,Util} from '@lowcode/jpaas-common-lib';
import allMenu from './allMenu.png'
import treeMenu from './treeMenu.png'
export default {
    name: "menuStyleDialog",
    props:{
        layerid:{},
        destroy:{},
        menuMode:{}
    },
    components:{
        RxDialog
    },
    data(){
        return {
            allMenu,treeMenu,
            active:'allMenu',
            menus:[
                {title:'抽屉式菜单',detail:'层级较多时，推荐使用该菜单',key:'allMenu',img:require('./allMenu.png')},
                {title:'树形菜单',detail:'层级较少时，推荐该菜单',key:'inline',img:require('./treeMenu.png')}
            ]
        }
    },
    created(){
        this.active = this.menuMode || "allMenu";
    },
    methods:{
        ok(v){
            v.loading = false ;
            Util.closeWindow(this,'ok',this.active)
        },
        cancel(){
            Util.closeWindow(this)
        }
    }
}
</script>

<style scoped>
p{
    margin: 0;
}
.menu-dialog-box{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}
.menu-style-layout{
    width: fit-content;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 0 10px;
    justify-content: center;
}
.menu-item{
    flex: 1;
    color: #2B3042;
    padding: 30px 24px;
    border: 1px solid #E4E6ED;
    border-radius: 8px;
    position: relative;
}
.menu-title{
    padding: 20px 0 4px;
    font-size: 16px;
    font-weight: 700;
}
.menu-detail{

}
.menu-item.menu-item-active{
    border-color: #1A5EFF;
}
.menu-item-active:before{
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    border-style: solid;
    border-right-color: #1A5EFF;
    border-top-color: #1A5EFF;
    border-left-color: transparent;
    border-bottom-color: transparent;
    border-width: 22px;
    z-index: 2;
    border-top-right-radius: 8px;
}
.menu-item-active:after{
    content: '';
    position: absolute;
    z-index: 3;
    border-bottom: 2px solid #fff;
    border-right: 2px solid #fff;
    width: 6px;
    height: 10px;
    top: 8px;
    right: 10px;
    transform: rotate(45deg);
}
</style>